<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div><!-- {{content}}差值表达式 -->
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                content:"数据",
            },
            //生命周期函数即vue实例在某一时间点会自动执行的函数
            //在控制台输入app.content='asd'，然后输入app.$destroy()来验证
            beforeCreate:function(){
                console.log('beforCreate')
            },
            created:function(){
                console.log('created');
            },
            beforeMount:function(){
                console.log('beforMount');
            },
            mounted:function(){
                console.log('mounted');
            },
            beforeDestroy:function(){
                console.log('beforDestroy');
            },
            destroyed:function(){
                console.log('destroyed');
            },
            beforeUpdate:function(){
                console.log('beforeUpdate');
            },
            updated:function(){
                console.log('updated');
            }

        })
    </script>
</body>
</html>